<template>
  <!-- PC 文章列表 -->
  <div class=" an-list-new">
    <h4>文章列表</h4>
    <div>
      <b-spinner
        v-if="loading"
        variant="primary"
        type="grow"
        label="Spinning"
      />
      <ul class="list-unstyled">
        <b-media
          v-for="item in defData.list"
          :key="item.article_id"
          tag="li"
          class="my-4"
          @click="onLink(item.article_id)"
        >
          <template v-slot:aside>
            <div class="an-list-img">
              <b-img
                left
                :src="item.thumbnail"
                :blank="item.thumbnail == '' || item.thumbnail == null"
                blank-color="#abc"
                width="120px"
                @click.stop="onLink(item.article_id)"
              ></b-img>
            </div>
          </template>
          <h5 class="mt-0 mb-1" @click.stop="onLink(item.article_id)">
            {{ item.title }}
          </h5>
          <p class="mb-0" @click.stop="onLink(item.article_id)">
            {{ item.article_abstract }}
          </p>
        </b-media>
      </ul>
    </div>
    <b-pagination
      v-model="currentPage"
      :total-rows="defData.total"
      :per-page="getData.perpage"
      @change="changePage"
    />
  </div>
</template>

<script>
import { getList } from "~/assets/services/api";
export default {
  name: "ListPage",
  data() {
    return {
      loading: false,
      getData: {
        perpage: 10,
        page: 1,
        status: 1,
        columnId: 1
      },
      defData: {
        list: [],
        total: 0
      },
      currentPage: 1
    };
  },
  /* asyncData({ app }) {
    const page = 1;
    const nd = {
      pagesize: 5,
      page,
      state: 1
    };
    const qs = require("qs");
    return app.$axios
      .post(
        `/anfile/php/an_ranweb.php`,
        qs.stringify({
          q: "articleList",
          data: nd
        })
      )
      .then(res => {
        return { defData: res.data.data, currentPage: page };
      });
  }, */
  mounted() {
    this.getList();
  },
  methods: {
    changePage(pageNum) {
      this.getData.page = pageNum;
      this.currentPage = pageNum;
      this.getList();
      // this.$router.push('/view/listPage/ ' + pageNum );
      // location.reload();
    },
    getList() {
      this.loading = true;
      this.defData.list = [];
      getList(this.getData).then(res => {
        this.loading = false;
        this.defData = res;
      });
    },
    onLink(id) {
      this.$router.push("/view/contPage/?id=" + id);
    }
  }
};
</script>

<style scoped>
.an-list-new {
  margin: 20px 0;
}
.my-4 {
  cursor: pointer;
}
</style>
